<template>
    <el-dialog
            title="供应商签约审批"
            :visible.sync="dialogVisible"
            width="70%"
            :modal="false"
            :before-close="handleClose">
        <div class="form-scroll-container">
            <span class="bold-text">供应商基本信息</span>
            <el-table :data="localTableData" style="width: 100%;">
                <el-table-column prop="supplierCode" label="供应商编码"></el-table-column>
                <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
                <el-table-column prop="supplierType" label="供应商分类">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.supplierType === '零件供应商'" type="warning">{{ scope.row.supplierType }}</el-button>
                        <el-button v-else-if="scope.row.supplierType === '集合供应商'" type="success">{{ scope.row.supplierType }}</el-button>
                        <el-button v-else-if="scope.row.supplierType === '成品供应商'" type="danger">{{ scope.row.supplierType }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="supplierLevel" label="供应商等级">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.supplierLevel === '一级供应商'" type="success">{{ scope.row.supplierLevel }}</el-button>
                        <el-button v-else-if="scope.row.supplierLevel === '二级供应商'" type="warning">{{ scope.row.supplierLevel }}</el-button>
                        <el-button v-else-if="scope.row.supplierLevel === '三级供应商'" type="danger">{{ scope.row.supplierLevel }}</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <span style="color:#409EFF">供应商签约</span>
            <el-progress :percentage="15" :format="format1" :show-text="false"></el-progress>
            <el-form :model="approvalForm" class="approval-form">
                <!--                -->
                <SupplierSignComView
                        @update:supplierData="handleSupplierDataUpdate"
                        @update:imageUrl="handleImageUrlUpdate"
                        :clearImg="imageUrl"
                />
                <!--                -->
                <el-row>
                    <el-col>
                        <el-form-item label="是否签约" required>
                            <el-radio-group v-model="approvalForm.agreement">
                                <el-radio label="同意">同意</el-radio>
                                <el-radio label="不同意">不同意</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="审批时间">
                                    <el-date-picker v-model="approvalForm.approvalTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="审批人">
                                    <el-input v-model="approvalForm.approver" disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col>
                        <el-form-item label="不同意原因" v-if="approvalForm.agreement === '不同意'">
                            <el-input type="textarea" v-model="approvalForm.reason"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitApproval">提交审批</el-button>
    </span>
    </el-dialog>
</template>

<script>
   import SupplierSignComView from "@/views/manage/messages/components/SupplierSignComView";
    export default {
        components: {
            SupplierSignComView
        },
        name: "SupplierSignView",
        props: {
            open: {
                type: Boolean,
            },
            supplierData: {
                type: Object,
                required: true
            },
            tableData: {
                type: Array,
                default: () => []
            },
        },
        data() {
            return {
                imageUrl: [], // 用于存储图片上传的 URL
                dialogVisible: this.open,
                localTableData: [this.supplierData] || [],
                approvalForm: {
                    approvalId:'',
                    supplierId: '',
                    startTime: '', // 签约开始日期
                    endTime: '', // 签约结束日期
                    settlementPeriod: '', // 结算期限
                    creditLimit: '', // 信用额度
                    purchasePerson: '', // 采购负责人
                    purchaseDepartment: '' ,// 采购归属部门
                    agreement: '',
                    approvalTime: '',
                    approver: '',
                    reason: '',
                },
            };
        },
        watch: {
            open: function(newVal, oldVal) {
                console.log(newVal)
                this.dialogVisible = newVal;
            },
            tableData: function(newVal, oldVal) {
                this.localTableData = newVal;
            },
            supplierData: function(newVal, oldVal) {
                this.localTableData = [newVal];
            },
        },
        methods: {
            handleSupplierDataUpdate(data) {
                this.approvalForm.supplierId=this.supplierData.id
                this.approvalForm.startTime = data.startTime;
                this.approvalForm.endTime = data.endTime;
                this.approvalForm.settlementPeriod = data.settlementPeriod;
                this.approvalForm.creditLimit = data.creditLimit;
                this.approvalForm.purchasePerson = data.purchasePerson;
                this.approvalForm.purchaseDepartment = data.purchaseDepartment;
            },
            handleImageUrlUpdate(imageUrl) {
                this.imageUrl = imageUrl;
            },
            submitApproval() {
                if (this.approvalForm.agreement === '不同意' && !this.approvalForm.reason) {
                    this.$message.error('请填写不同意原因');
                    return;
                }
                const temImges = this.imageUrl.map((img, index) => ({
                    pid: this.supplierData.id,
                    type: img.type,
                    remark: img.remark,
                    imges: img.imges,
                    enable: img.enable,
                    sort: index + 1 // 按照顺序依次设置 sort 值，从 1 开始
                }));
                // 这里可以使用 axios 或其他 HTTP 库来发送请求
                this.$axios.post('/manage/supplierSign/add', this.approvalForm)
                    .then(response => {
                            this.$axios.post('/manage/imgs/add',temImges).then(imgResponse => {
                                                    this.$message.success('提交成功');
                                                })
                        const data = response.data;
                        if (data.code === 200) {
                            this.$message.success(data.msg);
                            this.$emit('close');
                            // 关闭对话框或其他操作

                        } else {
                            this.$message.error('审批提交失败：' + data.msg);
                        }
                    })
                    .catch(error => {
                        console.error('审批提交错误：', error);
                        this.$message.error('审批提交时发生错误,请检查表单项');
                    });
            },
            format1(percentage) {
                return percentage === 100 ? '满' : `${percentage}%`;
            },
            handleClose(done) {
                this.$confirm('关闭后数据将不会保存，确认关闭吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(_ => {
                        done(); // 关闭对话框
                        this.imageUrl=[];
                        this.$emit("close"); // 通知父组件对话框已关闭
                    })
                    .catch(_ => {});
            },
            resetForm() {
                this.approvalForm = {
                    approvalId:'',
                    supplierId: '',
                    startTime: '', // 签约开始日期
                    endTime: '', // 签约结束日期
                    settlementPeriod: '', // 结算期限
                    creditLimit: '', // 信用额度
                    purchasePerson: '', // 采购负责人
                    purchaseDepartment: '' ,// 采购归属部门
                    agreement: '',
                    approvalTime: '',
                    approver: '',
                    reason: '',
                };
                this.dialogVisible = false; // 确保对话框状态被重置
            },
        },
        created() {
            let loginAdmin = JSON.parse(window.localStorage.getItem("form"));
            this.approvalForm.approver = loginAdmin.username;
            this.approvalForm.approvalId=loginAdmin.id;
        },
    }
</script>

<style scoped>
    .approval-form .el-form-item {
        margin-bottom: 0;
    }

    .approval-form .el-row {
        margin-bottom: 20px;
    }

    .approval-form .el-col {
        padding: 0 10px;
    }

    .approval-form .el-form-item {
        display: flex;
        align-items: center;
    }

    .approval-form .el-input__inner,
    .approval-form .el-date-editor {
        height: 40px;
        line-height: 40px;
    }

    .bold-text {
        display: block;
        margin-top: 20px;
        font-weight: bold;
    }

    .form-scroll-container {
        max-height: 400px;
        overflow-y: auto;
        padding: 10px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
    }

    .dialog-footer .el-button {
        margin-left: 10px;
    }
</style>